---
title: 'Global Styles'
---

# Global Styles

Theme UI offers a `Global` component (that wraps Emotion’s) for adding global
CSS with theme-based values.


By default (or, unless the
[`useRootStyles` configuration option](/theming#configuration-flags)is
disabled), the `ThemeUIProvider` component will apply styles in
`theme.styles.root` to the `<html>` element. It will also apply `color` and
`background-color` styles based on `theme.colors.text` and
`theme.colors.background` respectively.

<Note>
  Generally, you should try to avoid adding CSS to global scope. Many styles can
  be safely encapsulated into a component without the need for global styles.
</Note>

```jsx
import { Global } from 'theme-ui'

export default (props) => (
  <Global
    styles={{
      button: {
        m: 0,
        bg: 'primary',
        color: 'background',
        border: 0,
      },
    }}
  />
)
```

<Note>

If you are upgrading from a version of theme-ui older that v0.6.0, be aware the
import package has changed from `@emotion/core` to `@emotion/react`. For more
information see the
[Migration Notes for 0.6](https://theme-ui.com/migrating/#breaking-changes).

</Note>
